<template>
  <div>
    <!-- 右侧抽屉 -->
    <el-drawer
      :visible.sync="drawerData.isShow"
      :direction="drawerData.direction"
      size="45%"
      @close="closeDrawer"
    >
      <!-- 标题插槽 -->
      <div slot="title">
        <h2 class="title">
          用户人群
        </h2>
      </div>
      <!-- 表单部分 -->
      <div class="form-content">
        <el-form :model="form" :rules="rules">
          <el-form-item label="选择触达人群" prop="peopleType">
            <el-select
              v-model="form.peopleType"
              placeholder="请选择触达人群"
              class="selectPeople"
              @change="selectPeopleType"
            >
              <el-option
                v-for="(item, index) of peopleTypeList"
                :key="index"
                :label="item.key"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设置活动时间" required>
            <el-date-picker
              v-model="form.data"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <!-- 选择用户人群组件 -->
      <peopleType v-if="showPeopleType" class="peopleType"></peopleType>
      <!-- 底部按钮部分 -->
      <div class="footer-btn">
        <el-button size="small" @click="cancelPublish">
          取消
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="confirmPublish"
        >
          发布
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import peopleType from '@component/publish/task/peopleType' // 选择人群组件
export default {
  components: {
    peopleType
  },
  props: ['drawerData'],
  data() {
    return {
      // 表单数据
      form: {
        peopleType: 0, // 触达人群 默认0全站用户 1选择用户人群
        data: '' // 活动时间
      },
      // 表单验证规则
      rules: {
        peopleType: [
          { required: true, message: '请选择触达人群', trigger: 'blur' }
        ]
      },
      // 触达人群列表
      peopleTypeList: [
        { key: '全站用户', value: 0 },
        { key: '选择用户人群', value: 1 }
      ],
      // 控制选择用户人群组件显示
      showPeopleType: false
    }
  },
  methods: {
    // 选择触达人群选择器
    selectPeopleType(value) {
      this.showPeopleType = value === 1
    },
    // 底部按钮确认发布
    confirmPublish() {
      this.drawerData.isShow = false // 关闭抽屉
      // 跳转到运营管理-任务管理页面
    },
    // 底部按钮取消
    cancelPublish() {
      this.drawerData.isShow = false // 关闭抽屉
    },
    // 抽屉关闭事件
    closeDrawer() {
      // 清除操作状态
      this.form.peopleType = 0
      this.form.data = ''
      this.showPeopleType = false
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  color: #000;
}
.form-content {
  margin-left: 30px;
}
.selectPeople {
  width: 350px;
}
.footer-btn {
  position: absolute;
  right: 60px;
  bottom: 60px;
  .el-button:last-child {
    background: #1dc8a4;
  }
  .el-button {
    width: 100px;
  }
}
.peopleType {
  margin-top: 50px;
}
</style>
